import 'package:auto_route/auto_route.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:rongcloud_im_wrapper_plugin/rongcloud_im_wrapper_plugin.dart';

import '../../../config/route/bt_app_router.gr.dart';
import '../models/bt_chat_model.dart';
import '../models/bt_message.dart';

class BtChatMessageFileWidget extends StatelessWidget {
  const BtChatMessageFileWidget({Key? key, required this.item, required this.model}) : super(key: key);

  final BtMessage item;
  final BtChatModel model;

  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Visibility(
        visible: item.isSender,
        child: Container(
          padding: const EdgeInsets.only(top: 16, right: 18, bottom: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Row(
                children: [
                  Visibility(
                    visible: item.status == 2,
                    child: InkWell(
                      child: Image.asset(
                        'assets/images/bt_icon_chat_sync.png',
                        width: 16,
                        height: 16,
                      ),
                      onTap: () {
                        //widget.model.sendTextMessage((p0) => null);
                      },
                    ),
                  ),
                  Visibility(
                    visible: item.status == 0,
                    child: const SizedBox(
                      width: 16,
                      height: 16,
                      child: CircularProgressIndicator(
                        strokeWidth: 1.0,
                        color: Color(0xFF4DB4FF),
                      ),
                    ),
                  ),
                  const SizedBox(width: 8),
                  InkWell(
                    onTap: () {
                      context.router.navigate(FilePreviewRoute(
                          name: (item.message as RCIMIWFileMessage).name ?? '',
                          url: (item.message as RCIMIWFileMessage).remote ?? ''));
                    },
                    child: Container(
                        constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width - 196),
                        margin: const EdgeInsets.only(right: 10),
                        padding: const EdgeInsets.only(left: 10, top: 8, right: 10, bottom: 8),
                        decoration: const BoxDecoration(
                          color: Color(0xFF4DB4FF),
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(12),
                            bottomLeft: Radius.circular(12),
                            topRight: Radius.circular(2),
                            bottomRight: Radius.circular(12),
                          ),
                        ),
                        child: Row(
                          children: [
                            const Text(
                              'Please check my file',
                              style: TextStyle(color: Colors.white, fontSize: 14),
                            ),
                            const SizedBox(width: 3),
                            Image.asset(
                              'assets/images/bt_icon_chat_archive_right.png',
                              width: 24,
                              height: 24,
                            ),
                          ],
                        )),
                  ),
                ],
              ),
              const SizedBox(width: 10),
              ClipRRect(
                borderRadius: BorderRadius.circular(22),
                child: CachedNetworkImage(
                  width: 44,
                  height: 44,
                  fit: BoxFit.fill,
                  imageUrl: model.userAvatar,
                  placeholder: (context, url) => Container(
                    width: 44,
                    height: 44,
                    decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(22)),
                  ),
                  errorWidget: (context, url, error) => Container(
                    width: 44,
                    height: 44,
                    decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(22)),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      Visibility(
        visible: !item.isSender,
        child: Container(
          padding: const EdgeInsets.only(left: 18, top: 16, bottom: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              ClipRRect(
                borderRadius: BorderRadius.circular(22),
                child: CachedNetworkImage(
                  width: 44,
                  height: 44,
                  fit: BoxFit.fill,
                  imageUrl: model.targetAvatar,
                  placeholder: (context, url) => Container(
                    width: 44,
                    height: 44,
                    decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(22)),
                  ),
                  errorWidget: (context, url, error) => Container(
                    width: 44,
                    height: 44,
                    decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(22)),
                  ),
                ),
              ),
              const SizedBox(width: 10),
              InkWell(
                onTap: () {
                  context.router.navigate(FilePreviewRoute(
                      name: (item.message as RCIMIWFileMessage).name ?? '',
                      url: (item.message as RCIMIWFileMessage).remote ?? ''));
                },
                child: Container(
                    constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width - 196),
                    margin: const EdgeInsets.only(right: 10),
                    padding: const EdgeInsets.only(left: 10, top: 8, right: 10, bottom: 8),
                    decoration: const BoxDecoration(
                      color: Color(0xFF4DB4FF),
                      borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(12),
                        bottomLeft: Radius.circular(12),
                        topRight: Radius.circular(2),
                        bottomRight: Radius.circular(12),
                      ),
                    ),
                    child: Row(
                      children: [
                        const Text(
                          'Please check my file',
                          style: TextStyle(color: Colors.white, fontSize: 14),
                        ),
                        const SizedBox(width: 3),
                        Image.asset(
                          'assets/images/bt_icon_chat_archive_left.png',
                          width: 24,
                          height: 24,
                        ),
                      ],
                    )),
              ),
            ],
          ),
        ),
      ),
    ]);
  }
}
